<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <!-- 搜索表单-->
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="分账用户ID" prop="uid">
          <el-input v-model="queryParams.uid" placeholder="请输入分账用户ID" />
        </el-form-item>
        <el-form-item label="订单号" prop="orderId">
          <el-input v-model="queryParams.orderId" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="机器码" prop="facCode">
          <el-input v-model="queryParams.facCode" placeholder="请输入机器码" />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="queryParams.state" placeholder="请选择状态">
            <!-- <el-option label="未支付" :value="0"></el-option> -->
            <el-option label="已分账" :value="1"></el-option>
            <el-option label="分账失败" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="tableData" strip style="width: 100%">
        <el-table-column prop="id" label="id" align="center"></el-table-column>
        <el-table-column
          prop="uid"
          label="分账用户ID"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderId"
          label="订单号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="facCode"
          label="机器码"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="money"
          label="订单总金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="scale"
          label="分账比例"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="getMoney"
          label="用户分成金额"
          align="center"
        ></el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state === 0">未支付</el-tag>
            <el-tag v-else-if="scope.row.state === 1">已分账</el-tag>
            <el-tag v-else>分账失败</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏-->
      <el-pagination
        background
        align="center"
        @size-change="handleSizeChange($event, 111)"
        @current-change="data()"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 新增或修改 用户信息 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="姓名">
          <el-input v-model="form.nickName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="随行付商户号">
          <el-input v-model="form.mercNo"></el-input>
        </el-form-item>
        <el-form-item label="分账比例（%）">
          <el-input-number
            :min="0"
            :controls="false"
            v-model="form.scale"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  list,
  add,
  del,
  update,
  detail,
  inquire,
} from "@/api/app_pages/separateRecord";
import { getToken } from "@/utils/auth";
import { getDicts } from "@/api/system/dict/data";
export default {
  components: {},
  data() {
    return {
      queryParams: {},
      tableData: [],
      size: 20,
      currentPage: 1,
      total: 0,
      dialogVisible: false,
      form: {},
      dialogTitle: "添加分账用户",
    };
  },
  created() {
    this.data();
  },
  methods: {
    data() {
      list(this.size, this.currentPage).then((res) => {
        this.tableData = res.rows;
        this.total = parseInt(res.total);
      });
    },
    handleSizeChange(val, e) {
      this.size = val;
      this.data();
    },
    handleQuery() {
      inquire(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.total = parseInt(res.total);
      });
    },
    resetQuery() {
      this.queryParams = {};
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    updateDetail(id) {
      this.dialogTitle = "编辑分账用户信息";
      this.dialogVisible = true;
      this.form.id = id;
      detail(this.form.id).then((res) => {
        this.form = res.data;
      });
    },
    remove(id) {
      new Promise((resolve, reject) => {
        del(id).then((res) => {
          resolve();
        });
      }).then((res) => {
        this.$message.success("删除成功");
        this.data();
      });
    },
    submmit() {
      if (this.form.id) {
        new Promise((resolve, reject) => {
          update(this.form).then((res) => {
            this.dialogVisible = false;
            resolve();
          });
        }).then((res) => {
          this.data();
        });
      } else {
        new Promise((resolve, reject) => {
          add(this.form).then((res) => {
            this.dialogVisible = false;
            resolve();
          });
        }).then((res) => {
          this.data();
        });
      }
    },
  },
};
</script>
